<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="./css/students.css">
</head>

<body>
    <div class="outer">
        <h1>学生管理系统</h1>
        <div class="classDiv">
            <label for="">新增班级：</label><input type="text" name="" id=""><button id="addClasses">新增</button>
        </div>
        <div class="box1">
            <div class="create">
                <div class="tit">新增学生</div>
                <div class="input"><label for="">学生姓名：</label><input type="text" class="name"></div>
                <div class="input"><label for="">学生年龄：</label><input type="text" class="age"></div>

                <div class="classBox">
                    <span>学生班级：</span>
                    <select name="" class="chooseClasses">
                        <!-- <option value="前端01期">前端01期</option>
                        <option value="前端02期">前端02期</option> -->
                    </select>
                </div>
                <div class="input sex"><label for="">学生性别:</label>
                    <div class="sexBox">
                        <p><input type="radio" name="sex1" id="男" value="男"><label for="男">男</label></p>
                        <p><input type="radio" name="sex1" id="女" value="女"><label for="女">女</label></p>
                    </div>
                </div>
                <input type="button" class="btn" id="create" value="新增">
            </div>
            <div class="update">
                <div class="tit">修改学生</div>
                <div class="input"><label for="">学生姓名：</label><input type="text" class="name"></div>
                <div class="input"><label for="">学生年龄：</label><input type="text" class="age"></div>

                <div class="classBox">
                    <span>学生班级：</span>
                    <select name="" class="chooseClasses">
                    </select>
                </div>
                <div class="input sex"><label for="">学生性别:</label>
                    <div class="sexBox">
                        <p><input type="radio" name="sex2" id="男" value="男"><label for="男">男</label></p>
                        <p><input type="radio" name="sex2" id="女" value="女"><label for="女">女</label></p>

                    </div>
                </div>
                <input type="button" class="btn" id="update" value="修改">
            </div>
            <div class="find">
                <div class="tit">查询学生</div>
                <div class="choose">
                    <select name="" id="chooseName">
                        <option value="name">姓名</option>
                        <option value="age">年龄</option>
                        <option value="sex">性别</option>
                        <option value="classesName">班级</option>
                    </select>
                    <input type="text" name="" id="serchValue">
                </div>
                <input type="button" class="btn" id="find" value="查询">
            </div>
        </div>

        <div class="box2">
            <div class="tit">学生列表</div>
            <table>
                <thead>
                    <tr>
                        <th>学生编号</th>
                        <th>学生姓名</th>
                        <th>学生年龄</th>
                        <th>学生性别</th>
                        <th>学生班级</th>
                        <th>操作学生</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
        <div class="btns">
            <button id="firstPage">首页</button>
            <button id="prevPage">上一页</button>
            <span id="pageNum"></span>
            <button id="nextPage">下一页</button>
            <button id="lastPage">尾页</button>
            <select name="" id="showRows">
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>



    <script src="./js/jquery.min.js"></script>
    <script>
        let pageData = {
            pageSize: 2,
            nowPage: 1,
            searchType: "",
            searchValue: ""
        }


        render()


        // 下一页
        $("#nextPage").click(function () {
            if (pageData.nowPage < Math.ceil(pageData.total / pageData.pageSize)) {
                pageData.nowPage++;
                render()
            }
        })

        // 上一页
        $("#prevPage").click(function () {
            if (pageData.nowPage > 1) {
                pageData.nowPage--;
                render()
            }
        })
        // 首页
        $("#firstPage").click(function () {
            pageData.nowPage = 1;
            render()
        })

        // 尾页
        $("#lastPage").click(function () {
            pageData.nowPage = Math.ceil(pageData.total / pageData.pageSize)
            render()
        })



        // 渲染学生列表
        function render(data) {
            $.ajax({
                url: '/students/render',
                type: 'post',
                data,
                async: false,
                success(msg) {
                    if (msg.total) {
                        pageData.total = msg.total
                        add(msg.data)
                    } else {
                        add(msg)
                    }

                    function add(msg) {
                        let tbHtml = msg.map(item => (
                            `
                        <tr class="row">
                            <td class="_id">${item._id}</td>
                            <td class="name">${item.name}</td>
                            <td class="age">${item.age}</td>
                            <td class="sex">${item.sex}</td>
                            <td class="classes">${item.classesId.classesName}</td>
                            <td class="btn">
                                <button  class="updateBtn" type="button" value="修改" data-id="${item._id}">修改</button>
                                <button  class="delete" type="button" value="删除" data-id="${item._id}">删除</button>
                            </td>
                        </tr>
                        `
                        ))
                        $("tbody").html(tbHtml)

                    }

                    $("#pageNum").html(pageData.nowPage)
                }
            })

        //     $.ajax({
        //         url: "/classes/getClasses",
        //         type: "get",
        //         async: false,
        //         success(msg) {
        //             // console.log(msg)
        //             let str = msg.map(item => (
        //                 `
        //                 <option value="${item._id}">${item.classesName}</option>
        //                 `
        //             ))
        //             $(".chooseClasses").html(str)
        //         }
        //     })
        // };

        // 修改显示行数
        // $("#showRows").change(function () {
        //     pageData.pageSize = $(this).val()
        //     render(pageData)
        // })


        // window.onload = function () {
        //     // 删除学生
        //     $("tbody").on("click", ".delete", function () {
        //         const isDelete = confirm("确认删除？")

        //         if (isDelete) {
        //             $.ajax({
        //                 url: '/students/delete',
        //                 type: 'post',
        //                 data: {
        //                     _id: $(this).attr("data-id")
        //                 },
        //                 success(msg) {
        //                     console.log(msg)
        //                     if (msg) {
        //                         alert("删除成功！")
        //                     } else {
        //                         alert("删除失败！")
        //                     }
        //                     render();
        //                     $("input[type=text]").val("")
        //                 }
        //             })
        //         }
        //     })






            // 新增班级
            // $("#addClasses").click(function () {
            //     const classesName = $(".classDiv input").val()
            //     if (classesName != "") {
            //         $.ajax({
            //             url: "/classes/addClasses",
            //             type: "post",
            //             data: {
            //                 classesName
            //             },
            //             success(msg) {
            //                 console.log(msg)

            //             }
            //         })
            //     }
            // })



            // 新增学生
            // $("#create").click(function () {
            //     const name = $(".create .name").val()
            //     const age = $(".create .age").val()
            //     const classesId = $(".create .chooseClasses").val()
            //     const sex = $('.create input:radio[name="sex1"]:checked').val();
            //     let bool = false;
            //     if (name == "" || age == "" || sex == undefined) {
            //         bool = false
            //     } else if (name != "" && age != "" && sex != undefined) {
            //         bool = true
            //     }
            //     if (bool) {
            //         $.ajax({
            //             url: '/students/create',
            //             type: 'post',
            //             data: {
            //                 name,
            //                 age,
            //                 sex,
            //                 classesId
            //             },
            //             success(msg) {
            //                 if (msg) {
            //                     alert("新增成功！")
            //                 } else {
            //                     alert("年龄错误！")
            //                 }
            //                 pageData.nowPage = Math.ceil(pageData.total / pageData.pageSize)
            //                 render(pageData)
            //                 $("input[type=text]").val("")
            //             }
            //         })
            //     }
            // })


            // // 获取修改学生
            // $("tbody").on("click", ".updateBtn", function () {
            //     // $("tbody .updateBtn").click(function () {
            //     console.log("ok")
            //     const _id = $(this).attr("data-id")
            //     $.ajax({
            //         url: '/students/findStudent',
            //         type: 'post',
            //         data: {
            //             _id
            //         },
            //         success([msg]) {
            //             console.log($(`.update .chooseClasses option[value=${msg.classesId}]`))
            //             console.log(msg.classesId)
            //             $(".update .name").val(msg.name)
            //             $(".update .age").val(msg.age)
            //             $(`.update .sexBox input[value=${msg.sex}]`).prop("checked", true)
            //             $(`.update .chooseClasses option[value=${msg.classesId}]`).prop("selected",
            //                 true)
            //             $("#update").attr("_id", msg._id)
            //         }
            //     })
            // })

            // 确认修改

            // $("#update").click(function () {
            //     const name = $(".update .name").val()
            //     const age = $(".update .age").val()
            //     const classesId = $(".update .chooseClasses").val()
            //     const sex = $(`.update .sexBox input:checked`).val()
            //     const _id = $(this).attr("_id")

            //     let bool = false;
            //     if (name == "" || age == "" || sex == undefined) {
            //         bool = false
            //     } else if (name != "" && age != "" && sex != undefined) {
            //         bool = true
            //     }

            //     if (bool) {
            //         $.ajax({
            //             url: '/students/update',
            //             type: 'post',
            //             data: {
            //                 _id,
            //                 name,
            //                 age,
            //                 sex,
            //                 classesId
            //             },
            //             success(msg) {
            //                 if (msg) {
            //                     alert("修改成功！")
            //                 } else {
            //                     alert("修改失败！")
            //                 }
            //                 render(pageData)
            //                 $("input[type=text]").val("")
            //             }
            //         })
            //     }
            // })



            // 查询学生
            $("#find").click(function () {

                const searchType = $("#chooseName").val()
                const searchValue = $("#serchValue").val()
                pageData.searchType = searchType
                pageData.searchValue = searchValue

                render()

            })



        }
    </script>
</body>

</html>